<template>
  <div class="font">
    <div class="container">
      <div class="infos">
        <div style="font-size:12.8px">A</div>
        <div style="font-size:16px; text-indent:-12.8px">标准</div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div style="font-size:35px; text-align: right">A</div>
      </div>
      <ul class="size-wrapper" id="slider" >
        <li class="size-item"></li>
        <li class="size-item"></li>
        <li class="size-item"></li>
        <li class="size-item"></li>
        <li class="size-item"></li>
        <li class="size-item"></li>
        <li class="size-item"></li>

        <div class="dot" :style="styleObj" @touchmove="touchMove"></div>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Font',
  data () {
    return {
      styleObj: {
        left: '-5px'
      }
    }
  },
  methods: {
    touchMove (e) {
      var slider = document.getElementById('slider') // 获取标尺元素
      var offetLeft = slider.offsetLeft // 获取标尺距离屏幕左边界的距离px
      var maxDistanceX = slider.offsetWidth - 5 // 获取标尺的宽度，有余要让圆点盖在刻度上，所以要减掉5px
      var distanceX = e.touches[0].clientX - offetLeft - 5 // 设置圆点距离标尺最左侧的距离
      var unitLength = slider.offsetWidth / 7 // 设置单位长度，因为有7个刻度，所以除7
      if (distanceX > -5 && distanceX < maxDistanceX) {
        this.styleObj.left = distanceX + 'px' // 更新圆点的样式
        // 1-2
        // 当小于一个单位长度是，为减下字体
        var originFont = 1
        var minFont = 0.8
        var perChangePx = (originFont - minFont) / unitLength // 每个像素改变的字体单位大小
        var changeLength = distanceX - unitLength // 以第二个刻度为原点，向左减小，向右增大
        var changeFont = changeLength * perChangePx
        // 注册事件
        this.$emit('change-font-size', changeFont)
      }
    }
  },
  mounted () {
    // 默认将刻度置于标准位置
    var slider = document.getElementById('slider') // 获取标尺元素
    var unitLength = slider.offsetWidth / 7 // 设置单位长度，因为有7个刻度，所以除7
    this.styleObj.left = unitLength - 5 + 'px' // 更新圆点的样式
  }
}
</script>

<style>
  .font {
    position: fixed;
    bottom: 0;
    left: 0;
    overflow: hidden;
    display: flex;
    padding-top: 10px;
    width: 100%;
    height: 100px;
    background: #fff;
  }
  .container {
    width: 80%;
    margin: 0 auto;
  }
  .size-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #888;
  }
  .size-item {
    position: relative;
    top: 5px;
    list-style: none;
    flex: 1;
    height: 10px;
    border-right: 1px solid #888;
  }
  .size-item:first-child {
    border-left: 1px solid #888;
  }
  .infos {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: 10px;
  }
  .infos > div {
    flex: 1;
  }
  .dot {
    position: absolute;
    top: 3px;
    left: -5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    box-shadow: 0px 0px 4px #333333;
    background: #fff;
  }
</style>
